<template>
    <view class="search_wrap">
        <!-- homeSub/pages/search/search.wxml -->
        <view class="search">
            <view class="search_box">
                <!-- 搜索框 -->
                <view class="weui-search-bar">
                    <view class="weui-search-bar__form">
                        <!-- 点击之后，出现input框 -->
                        <view class="weui-search-bar__box">
                            <view @tap="goLocation" class="weui-icon-search_in-box">
                                <image class="img1" src="https://oos-cn.ctyunapi.cn/front-end/static/homeSub/images/add.png"></image>
                                <view class="locationName">{{ cityname || '请选择' }}</view>
                                <image class="img2" src="https://oos-cn.ctyunapi.cn/front-end/static/homeSub/images/down.png"></image>
                            </view>
                            <input
                                type="text"
                                class="weui-search-bar__input"   
                                placeholder="请输入站点/地点名称"
                                :value="searchtxt"
                                @input="inputTyping"
                                confirm-type="search"
                                @confirm="searchclk"
                            />
                            <!-- 输入款字数大于0，则显示清除按钮 -->
                            <view class="weui-icon-clear" v-if="searchtxt.length > 0" @tap="clearInput">
                                <icon type="clear" size="16"></icon>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="search_txt" @tap="searchclk">搜索</view>
        </view>
        <view class="kobai"></view>
        <!-- 历史搜索 -->
        <view class="search_history" v-if="history.length > 0">
            <view class="tit">
                <view class="txt1">历史搜索</view>
                <image class="img" src="https://oos-cn.ctyunapi.cn/front-end/static/homeSub/images/delete.png" @tap="clearhis"></image>
            </view>
            <scroll-view :scroll-x="true" style="margin-top: 31rpx">
                <view class="searchTag_box">
                    <view :data-index="index" @tap="clk_sel" v-for="(item, index) in history" :key="index">
                        <text class="searchTag">{{ item }}</text>
                    </view>
                </view>
            </scroll-view>
        </view>
        <!-- 附近站点 -->
        <view :class="'nearby-box ' + (nearby == true ? 'show' : 'hide')">
            <view class="nearby">
                <image class="img" src="https://oos-cn.ctyunapi.cn/front-end/static/homeSub/images/chargingPile.png"></image>
                <view class="txt1">附近站点</view>
            </view>
            <view class="list" :data-id="item.id" @tap="details(item)" v-for="(item, index) in searchArr" :key="index">
                <view class="list_left">
                    <view class="findName">{{ item.name }}</view>
                    <view class="findAddre">{{ item.address }}</view>
                </view>

                <view class="findD">距离您{{ item.distanceDouble ? (item.distanceDouble).toFixed(2) : 0 }}km</view>
            </view>
        </view>

        <!-- 站点信息 -->
        <view :class="'nearby-box ' + (station == true ? 'show' : 'hide')" style="padding: 0;">
            <view class="list" :data-id="item.id" @tap="details(item)" v-for="(item, index) in searchArr" :key="index">
                <view class="list_left">
                    <view class="findName">{{ item.name }}</view>
                    <view class="findAddre">{{ item.address }}</view>
                </view>

                <view class="findD">距离您{{ item.distanceDouble ? (item.distanceDouble).toFixed(2) : 0 }}km</view>
            </view>
        </view>

        <!-- 空信息 -->
        <!-- <Upgrading text="暂无站点" text1="暂无任何站点哦！" v-if="kong"></Upgrading> -->


        
        <!-- 移动端优化 搜索结果 -->
        <Upgrading text="暂无站点" text1="暂无相关充电站点搜索结果" v-if="kong"></Upgrading>

        
    </view>
</template>

<script>
'use strict';
import siteListItem from '../../../components/site-list/site-list-item';
import Upgrading from '../../../components/upgrading/upgrading';

// exports.__esModule = true;
/* homeSub/pages/search/search.wxss */

var app = getApp();

var https_1 = require('./../../../api/https.js');
export default {
    components: {
        siteListItem,
        Upgrading
    },
    // 生命周期函数--监听页面加载
    data() {
        return {
            searchtxt: '',
            history: [],
            cityname: '城市',
            nearby: true,
            station: false,
            kong: true,
            searchArr: [],
            citynameFun1: ''
        };
    },
    onLoad: function () {
        var that = this;
        var sitehis = uni.getStorageSync('sitehis');

        if (sitehis != '' && sitehis != undefined && sitehis != null) {
            that.history=sitehis
        }

        uni.hideLoading(); // 城市
    },
    // 生命周期函数--监听页面显示
    onShow: function () {   
        this.citynameFun();
        this.nearbyFun();
        // 没有登录的情况不请求站点数据
        // if(uni.getStorageSync('token')){
        //     this.nearbyFun();
        // }
        
    },
    methods: {
        //城市
        citynameFun: function () {
            this.cityname = uni.getStorageSync('cityName') ? uni.getStorageSync('cityName'): uni.getStorageSync('currentCityName')
        },

        //定位
        goLocation: function () {
            uni.navigateTo({
                url: '../area/area'
            });
        },

        //搜索
        hideInput: function () {
            this.searchtxt= ''
        },

        clearInput: function () {
            this.searchtxt= ''
        },

        inputTyping: function (e) {
            //搜索数据
            this.searchtxt=e.detail.value
        },

        //点击历史
        clk_sel: function (e) {
            var index = e.currentTarget.dataset.index;
            var txt = this.history[index];
            this.searchtxt=txt
            this.searchclk();
        },

        //删除历史记录
        clk_del: function (e) {
            var index = e.currentTarget.dataset.index;
            var history = this.history;

            if (history.length == 1) {
                history = [];
                uni.setStorageSync('sitehis', history);
                this.history=[]
            } else {
                history.splice(index, 1);
                uni.setStorageSync('sitehis', history);
                this.history=history
            }
        },

        //清除历史记录
        clearhis: function () {
            var history = this.history;
            history = [];
            uni.setStorageSync('sitehis', history);
            this.history=history
        },

        // 搜索
        searchclk: function () {
			this.getJson();
			// this.search();
			// 没有登录的情况不请求站点数据
            // if(uni.getStorageSync('token')) {
            //     this.getJson();
            //     this.search();
            // }

            if (this.searchtxt != '') {
                console.log('有值,去新的搜索页面')
                uni.navigateTo({
                    url: `/homeSub/pages/searchNew/searchNew?searchVal=${this.searchtxt}`
                });
            }else{
                console.log('无值,不用动')
            }
            
        },

        // 获取站点
        getJson: function () {
            var searchtxt = this.searchtxt;

            if (searchtxt != '') {
                var $this = this; // 添加历史

                var history = $this.history;

                if (searchtxt != '') {
                    //防止重复
                    for (var i = 0; i < history.length; i++) {
                        if (history[i] == searchtxt) {
                            history.splice(i, 1);
                        }
                    } //防止大于10个

                    if (history.length > 9) {
                        history.pop();
                    }

                    history.splice(0, 0, searchtxt);
                    uni.setStorageSync('sitehis', history);
                }

                this.history=history
            }
        },

        //附近站点
        nearbyFun: function () {
            var that = this;
            https_1
                .getStationPage({
                    appointment: false,
                    freeParking: false,
                    idle: false,
                    memberQueryPreferenceDto: {},
                    keyword: this.searchtxt,
                    areaName: uni.getStorageSync('cityName') ? uni.getStorageSync('cityName') : uni.getStorageSync('currentCityName'),
                    latitude: uni.getStorageSync('latitude'),
                    longitude: uni.getStorageSync('longitude'),
                    areaId: uni.getStorageSync('cityId'),
                    current: 1,
                    pageSize: 5,
                    sellerNo: app.globalData.sellerNo,
                    sortMode: 0
                })
                .then(function (res) {
                    if (res.code == 0) {
                        var _data = res.data.data;

                        if (_data.length != 0) {
                            that.kong=false,
                                that.nearby=true,
                                that.station=false,
                                that.searchArr= _data
                        } else {
                            that.kong=true,
                                that.nearby=false,
                                that.station=false
                        }
                    }
                });
        },

        //跳转到站点详情
        details: function ({id,terminalType}) {
            if(terminalType ===2) {
                uni.navigateTo({
                    url: '/homeSub/pages/eBikeSiteDetail/eBikeSiteDetail?stationId=' + id
                });
            } else{
                uni.navigateTo({
                    url: '/homeSub/pages/siteDetail/siteDetail?stationId=' + id
                });  
            }      
			// 没有登录的情况不请求站点详情数据
            // app.globalData.CHECK_LOGIN(function () {
            //     uni.navigateTo({
            //         url: '/homeSub/pages/siteDetail/siteDetail?stationId=' + _id
            //     });
            // });
        },

        // 搜索的站点
        search: function () {
            var that = this;
            https_1
                .getStationPage({
                    appointment: false,
                    freeParking: false,
                    idle: false,
                    memberQueryPreferenceDto: {},
                    keyword: this.searchtxt,
                    areaName: uni.getStorageSync('cityName') || uni.getStorageSync('currentCityName'),
                    latitude: uni.getStorageSync('latitude'),
                    longitude: uni.getStorageSync('longitude'),
                    areaId: uni.getStorageSync('cityId'),
                    current: 1,
                    pageSize: 10,
                    sellerNo: app.globalData.sellerNo,
                    sortMode: 0
                })
                .then(function (res) {
                    if (res.code == 0) {
                        var _data = res.data.data;

                        if (_data.length != 0) {
                            that.kong=false,
                            that.nearby=false,
                            that.station=true,
                            that.searchArr=_data
                        } else {
                            that.kong=true,
                                that.nearby=false,
                                that.station=false
                        }
                    }
                });
        }
    }
};
</script>
<style lang="less" scoped>
/* homeSub/pages/search/search.wxss */
@import "../../../commin/commin.less";

page {
    background-color: #F5F7FA;
}

.show {
    display: block;
}

.hide {
    display: none;
}

.search_wrap {
	background-color: #F5F7FA;
	min-height: 100vh;
}

.search {
    position: fixed;
    width: 100%;
    // #ifndef H5
    top:0;
    // #endif

    // #ifdef H5
    top: calc(44px + env(safe-area-inset-top));
    // #endif
    z-index: 99;
    display: flex;
    background-color: @white-color;
    align-items: center;
    .paddings(17rpx, 33rpx, 24rpx, 26rpx);

    .search_box {
        .kuangao(610rpx, 70rpx);
    }

    .weui-search-bar {
        display: flex;
    }

    .weui-icon-search {
        margin-right: 8px;
        font-size: inherit;
    }

    .weui-icon-search_in-box {
        position: absolute;
        left: 0rpx;
        top: 12rpx;
        display: flex;
        align-items: center;

        .locationName {
            .fontsize(28rpx);
            font-family: PingFang SC;
            font-weight: 500;
            color: @text-color2;
            margin: -5rpx 8rpx;
            width: 100rpx;
            overflow: hidden; //溢出隐藏
            white-space: nowrap; //禁止换行
            text-overflow: ellipsis; //...
        }

        .img1 {
            .kuangao(23rpx, 30rpx);
        }

        .img2 {
            .kuangao(25rpx, 25rpx);
        }
    }

    .weui-search-bar__text {
        display: inline-block;
        font-size: 14px;
        vertical-align: middle;
    }

    .weui-search-bar__form {
        flex: auto;
        background: #F5F7FA;
        border-radius: 35rpx;
        .paddings(10rpx, 10rpx, 10rpx, 33rpx);
    }

    .weui-search-bar__box {
        position: relative;
        padding-left: 30px;
        padding-right: 30px;
        width: 100%;
        box-sizing: border-box;
        z-index: 1;
    }

    .weui-search-bar__input {
        height: 28px;
        line-height: 28px;
        font-size: 14px;
        margin-left: 110rpx;
        width: 340rpx;
		background-color: @text-color6;
        overflow: hidden; //溢出隐藏
        white-space: nowrap; //禁止换行
        text-overflow: ellipsis; //...
    }

    .weui-icon-clear {
        position: absolute;
        top: 0;
        right: 0;
        padding: 7px 8px;
        font-size: 0;
    }

    .weui-search-bar__label {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2;
        border-radius: 3rpx;
        text-align: center;
        color: #9B9B9B;
        background: #FFFFFF;
        line-height: 28px;
    }

    .weui-search-bar__cancel-btn {
        margin-left: 10px;
        line-height: 28px;
        color: #09BB07;
        white-space: nowrap;
        font-size: 30rpx;
    }

    .img {
        width: 44rpx;
        height: 44rpx;
        margin-top: 36rpx;
    }

    .tipInfo {
        .kuangao(14rpx, 14rpx);
        .position(absolute, 20rpx, 34rpx, 0, auto);
        .borderradius(7rpx, 7rpx, 7rpx, 7rpx);
        background: @orange;
    }

    .search_txt {
        .fontsize(30rpx);
        font-family: PingFang SC;
        font-weight: bold;
        color: @blue;
        margin-left: 23rpx;
    }
}

.kobai {
    height: 115rpx;
}

.search_history {
    .borders(2rpx, @white-color);
    box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
    .borderradius(16rpx, 16rpx, 16rpx, 16rpx);
    .margins(16rpx, 24rpx, 16rpx, 24rpx);
    .paddings(40rpx, 34rpx, 40rpx, 34rpx);

    .tit {
        display: flex;
        justify-content: space-between;
        padding-bottom: 32rpx;
        border-bottom: 1rpx solid #DCDFE6;

        .txt1 {
            .fontsize(34rpx);
            font-family: PingFang SC;
            font-weight: bold;
            color: @text-color2;
        }

        .img {
            .kuangao(35rpx, 37rpx);
        }
    }

    .searchTag_box {
        display: flex;
        width: 100%;

        .searchTag {
			display: inline-block;
            text-align: center;
            overflow: hidden;
            line-height: 48rpx;
            background: #F0F2F5;
			border-radius: 24rpx;
            padding: 0 24rpx;
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: @text-color3;
            margin-right: 20rpx;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			max-width: 160rpx;
        }
    }
}

.nearby-box {
    .margins(24rpx, 24rpx, 24rpx, 24rpx);
    .borders(2rpx, #FFFFFF);
    box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
    .borderradius(16rpx, 16rpx, 16rpx, 16rpx);
    .paddings(40rpx, 0, 40rpx, 0);

    .nearby {
        display: flex;
        align-items: center;
        .paddings(0, 0, 25rpx, 40rpx);
        border-bottom: 1rpx solid #DCDFE6;
        ;

        .img {
            .kuangao(31rpx, 31rpx);
            margin-right: 14rpx;
        }

        .txt1 {
            .fontsize(34rpx);
            font-family: PingFang SC;
            font-weight: bold;
            color: @text-color2;
        }
    }

    .list {
        .margins(40rpx, 40rpx, 40rpx, 23rpx);
        padding-bottom: 40rpx;
        border-bottom: 1rpx dashed #C0C4CC;
        display: flex;
        justify-content: space-between;
        align-items: center;

        &:last-child {
            border: none;
        }

        .list_left {
            width: 500rpx;
        }

        .findName {
            .fontsize(30rpx);
            font-family: PingFang SC;
            font-weight: bold;
            color: @text-color1;
            margin-bottom: 25rpx;
            .yiman(1);
        }

        .findD {
            text-align: right;
            .fontsize(24rpx);
            font-family: PingFang SC;
            font-weight: 400;
            color: @text-color3;
            margin-left: 20rpx;
            white-space: nowrap;
        }

        .findAddre {
            .fontsize(24rpx);
            font-family: PingFang SC;
            font-weight: 500;
            color: @text-color3;
        }
    }
}
</style>
